<!--编辑商品分类页  -->
<template>
  <div class="total">
    <div class="container">
      <el-form ref="form" :model="sizeForm" label-width="auto">

        <el-form-item label="品牌名称" required>
          <el-input v-model="sizeForm.name" />
        </el-form-item>

      

        <el-form-item label="品牌首字母">
          <el-input v-model="sizeForm.firstLetter" />
        </el-form-item>

          <!-- 品牌logo -->
          <el-form-item label="品牌LOGO" >
            <el-upload v-model:file-list="fileList" class="upload-demo" action="http://120.24.64.5:8088/mall-admin/minio/upload"
            :on-remove="handleRemove" :on-success="handlePreview" list-type="picture">
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 100kb
              </div>
            </template>
          </el-upload>
          </el-form-item>
        

          <!-- 品牌专区大图 -->
          <el-form-item label="品牌专区大图" required>
           <el-upload v-model:file-list="fileList2" class="upload-demo" action="http://120.24.64.5:8088/mall-admin/minio/upload"
            :on-remove="handleRemove2" :on-success="handlePreview2" list-type="picture">
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 100kb
              </div>
            </template>
          </el-upload>
          </el-form-item>
          




        <el-form-item label="品牌故事">
          <el-input v-model="sizeForm.brandStory" :rows="2" type="textarea" placeholder="Please input" />
        </el-form-item>

          <el-form-item label="排序">
            <el-input v-model="sizeForm.sort" />
          </el-form-item>

        <el-form-item label="是否显示">
          <el-radio-group v-model="sizeForm.showStatus">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="品牌制造商">
          <el-radio-group v-model="sizeForm.factoryStatus">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>



        <el-button type="primary" @click="onConfirm" style="margin-left:50px;">提交</el-button>

      </el-form>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import qs from "qs"
import * as api from "@/request/api"

let route = useRoute()
let router = useRouter()
let id = route.query.id

const sizeForm = ref({
  bigPic: '',
  brandStory: '',
  factoryStatus:1,
  firstLetter: '',
  id: '',
  logo: '',
  name: '',
  productCommentCount: '',
  productCount: '',
  showStatus: 0,
  sort: '',
})


//待选属性
const value = ref([])
const props = {
  expandTrigger: 'hover',
}
const handleChange = (value) => {
  console.log(value)
}

const options = ref([])








//上传图片
const fileList = ref<UploadUserFile[]>([])
const fileList2 = ref<UploadUserFile[]>([])

//进入编辑页面后根据id请求数据
api.product.brandItemDetail(id).then((res) => {
  console.log(res);
  // let newRes = JSON.parse(JSON.stringify(res))
  sizeForm.value = res
  let obj={
    name: res.logo.slice(38),
    url: res.logo,
  }
  fileList.value.push(obj)

  let obj2={
    name: res.bigPic.slice(38),
    url: res.bigPic,
  }
  fileList2.value.push(obj2)
})

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
}
const handleRemove2: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
  sizeForm.value.logo=file.data.url
}
const handlePreview2: UploadProps['onPreview'] = (file) => {
  console.log(file)
  sizeForm.value.bigPic = file.data.url
}


//编辑完成后点击确认
let onConfirm = async () => {
  let response = await api.product.brandUpdate(sizeForm.value)

  console.log(response);
  router.go(-1)
}














</script>


<style scoped>
.el-radio-group {
  margin-right: 12px;
}

:deep .el-input__wrapper {
  width: 200px !important;
}

.total {
  width: 100%;
  height: 100%;
}

.container {
  width: 720px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #eee;
  margin-top: 30px;
}


:deep .el-input__wrapper {
  width: 530px;
}

:deep .el-input__inner {
  width: 530px;
}
</style>